import React,{ useState } from 'react';


// 当在子组件中修改 name 属性会导致子组件重新被调用渲染
let Child = (props)=>{
  console.log('Child组件被执行了');

  return (<div>
    Child -- {props.name}
    <button onClick={()=>{
      // 3. 在子组件中触发修改
      props.changeName('低举')
    }}>修改 name</button>
  </div>)
}

Child = React.memo(Child)

const App = () => {
  const [count,setCount] = useState(100)
  const [name,setName] = useState('高举')

  // 1. 父组件定义修改函数
  const changeName = (val)=>{
    setName(val)
  }

  return (
    <div>
      <h1>{count}</h1>

      <button onClick={()=>{
        setCount(count + 1)
      }}>加 1</button>

      <hr />
      {/* 2. 将修改函数传递给子组件 */}
      <Child name={name} changeName={changeName} />
    </div>
  );
};

/*
  父组件给子组件传递一个 name 属性
  此时父组件修改 count 不会影响到子组件重新渲染

  在给子组件传递一个 changeName
  此时父组件修改 count 会导致子组件重新渲染

  原因：
  因为 changName 是父组件的一个函数，当 count 值发生改变的时候，会导致父组件重新渲染
  父组件一旦重新渲染就会重新创建一个 changName 函数，changName 又被传递到 Child 组件中
  了，所以当父组件的 count 发生变化的时候又会导致 Child 组件被重新渲染

  晚上：使用 useCallback 解决无关函数导致的重新渲染
*/

export default App;
